<!--
 * @Description:
 * @Autor: 蔡英兰
 * @Date: 2023-05-04 16:39:02
 * @LastEditors: yangshuai yangshuai18@beyondsoft.com
 * @LastEditTime: 2023-11-14 15:40:39
-->
<template>
  <el-dialog
    class="mYdialog"
    ref="drawer"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :direction="direction"
    :show-close="false"
    :fullscreen="fullscreen"
    :width="size"
    :wrapperClosable="false"
    custom-class="drawerWrap"
    :destroy-on-close="isDestoryClose"
    @close="$emit('closeDrawer')"
    :append-to-body="appendToBody"
  >
    <div class="drawer_header" slot="title">
      <div :data-extend="titleExtend">{{ drawTitle }}</div>
      <img v-if="showCloseImg" src="./img/gb_ic.png" alt="" @click="closed" />
    </div>
    <slot></slot>
  </el-dialog>
</template>

<script>
export default {
  props: {
    drawTitle: {
      type: String,
      default: "新增信息",
    },
    size: {
      type: String,
      default: "55%",
    },
    isDestoryClose: {
      type: Boolean,
      default: true,
    },
    titleExtend: {
      type: String,
      default: "",
    },
    appendToBody: {
      type: Boolean,
      default: false,
    },
    showCloseImg: {
      type: Boolean,
      default: true,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      direction: "rtl",
    };
  },
  methods: {
    open() {
      // debugger
      this.visible = true;
    },
    closed() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.mYdialog {
  ::v-deep .el-drawer__body {
    height: 0;
  }
  .drawer_header {
    border-bottom: 1px solid #d8d8d8;
    padding: 10px 16px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    // font-weight: bold;
    color: #1c2438;
    line-height: 22px;
    -webkit-background-clip: text;
    img {
      cursor: pointer;
    }
  }
  ::v-deep .el-dialog__header {
    padding: 0;
  }
  ::v-deep .el-dialog__body {
    padding: 0;
  }
}
</style>
